히트맵 구현하기(자체 구현하기 vs 외부솔루션) | 퀘스트에 참여하세요

인사이트/로그개발 관련

히트맵 구현하기(자체 구현하기 vs 외부솔루션)

#히트맵 #npm #직접구현 #개발 #유료vs무료 #솔루션 #hotjar #crazyegg #mouseflow #fullstory

작성일 : 25.01.24 09:22

👉 본문을 50%이상을 읽으면 '여기까지다' 퀘스트가 완료됩니다(로그인 필수)

오늘은 히트맵에 개발에 대해서 한번 알아봤습니다.

오늘 저희팀에서 히트맵 사용하냐고 해서, 아니라고했는데 , 내내 맘에 좀 걸리드라구요.

물론 다양한 이벤트를 쌓고 있기는 한데, 있으면 있을수록 좋기는 하니까요?

이 버전에서는 직접 구현하는 거랑, 아닌 방법 둘다 소개해보도록 하겠습니다.

직접 구현

외부 솔루션에 의존하지 않고, 쌓는 방법은 역시나 한땀한땀 하는 방법밖에 없습니다.

히트맵의 본질은 유저의 마우스와 클릭에 대한 데이터를 쌓고 분석하는 것이기 때문입니다.

그런데 딱 봐도 데이터 엄청 많을 것 같지 않나요? 한 사용자가 마우스를 얼마나 내릴까요?

한페이지에서도 한 30번 이상의 이벤트가 나올것 같은데… 쉽지 않죠 , 어렵다보다는 하기 싫다는게 더 맞겠네요.

1. 마우스 이벤트 추적(클라이언트)

- 클릭시 이벤트 수집 (클릭)
- - 마우스 이동시 이벤트 수집 (이동)
  - - 스크롤 이벤트 수집 (클릭)

  import { useEffect } from 'react';

const HeatmapTracker = () => {
  useEffect(() => {
    const handleClick = (e) => {
      const data = {
        type: 'click', x: e.clientX,y: e.clientY,timestamp: Date.now(),
      };
      sendToServer(data);
    };

    const handleMouseMove = (e) => {
      const data = {
        type: 'mousemove',x: e.clientX,y: e.clientY,timestamp: Date.now(),
      };
      sendToServer(data);
    };

    const handleScroll = () => {
      const data = {
        type: 'scroll', scrollY: window.scrollY,timestamp: Date.now(),
      };
      sendToServer(data);
    };

    // 이벤트 리스너 등록
    document.addEventListener('click', handleClick);
    document.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('scroll', handleScroll);

    return () => {
      document.removeEventListener('click', handleClick);
      document.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

2. 서버 측에서 데이터 저장

서버에서는 클라이언트로부터 받은 히트맵 데이터를 처리하고 저장해야 합니다. 일반적으로 이를 데이터베이스에 저장하고, 나중에 이를 바탕으로 히트맵을 시각화합니다.

클라이언트에서 받은 히트맵 데이터를 데이터베이스에 저장하는 부분은 실제로 선택한 데이터베이스(MySQL, MongoDB 등)에 맞춰서 작성해야 합니다.

const mongoose = require('mongoose'); 
const heatmapSchema = new mongoose.Schema({ type: String, x: Number, y: Number, scrollY: Number, timestamp: Date, }); 
const Heatmap = mongoose.model('Heatmap', heatmapSchema); 
const saveHeatmapData = (data) => { 
const heatmap = new Heatmap(data); 
 heatmap.save() .then(() => console.log('Data saved')) .catch((err) => console.error('Error saving data:', err)); 
};

3. 히트맵 시각화

히트맵을 클라이언트에서 시각화하려면, 수집된 데이터를 기반으로 각 위치에 색상을 입히는 작업이 필요합니다.

react-heatmap-grid와 같은 패키지를 활용하면 보다 쉽게 시각화할 수 있습니다.

import React from 'react'; 
import HeatMap from 'react-heatmap-grid'; 

const MyHeatmap = ({ data }) => { 
// 데이터를 기반으로 히트맵의 좌표와 값을 설정 
const values = data.map(d => [d.x, d.y, 1]); 
// 예시: x, y 좌표, 클릭 횟수 등 
return ( <HeatMap xLabels={['Label1', 'Label2', 'Label3']} 
// x축 레이블 yLabels={['LabelA', 'LabelB', 'LabelC']} 
// y축 레이블 data={values} /> ); }; 

export default MyHeatmap;